<script setup lang="ts">
import SearchTable from '../../../components/Table/SearchTable.vue'
import AllTable from '../../../components/Table/AllTable.vue';
import { studentList, studentAdd } from '../../../api/Table/index'
// import City from '../../../components/Table/City.vue'
import { ref, reactive, onMounted } from 'vue';
import { ElMessageBox } from 'element-plus'
import qs from 'qs';

const radio1 = ref('1')

const form = reactive({
    stuName: '',
    stuNo: '',
    className: '',
    salary: '',
    origin: '',
    expertiseName: '',
    collegeName: '',
    gradYear: '',
})

const NameData = ['检测人员姓名', '检测区域', '检测环境', '用水检测']
const TableName = [
    {
        title: '学号',
        text: 'stuNo'
    },
    {
        title: '学生姓名',
        text: 'stuName'
    },
    {
        title: '班级',
        text: 'className'
    },
    {
        title: '学院名称',
        text: 'collegeName'
    },
    {
        title: '专业',
        text: 'expertiseName'
    },
    {
        title: '创建时间',
        text: 'createdTime'
    },
    {
        title: '上线城市',
        text: 'workCity'
    },
    {
        title: '市场部来源',
        text: 'origin'
    },
    {
        title: '毕业薪资',
        text: 'salary'
    },
    {
        title: '学生状态',
        text: 'status'
    },
    {
        title: '毕业年份',
        text: 'gradYear'
    }
]
const tableData: any = ref([])
const getTable = async () => {
    let res = await studentList()
    tableData.value = res.data.data.result
}

const handleClose = (done: () => void) => {
    ElMessageBox.confirm('Are you sure to close this dialog?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}

onMounted(() => {
    getTable()

})


const dialogVisible = ref(false)
const dialogTitle = ref('')
//弹出修改框
const handleEdit = (index: number, row: any) => {
    dialogTitle.value = '修改'
    dialogVisible.value = true
    console.log(index, row)

    form.stuNo = row.stuNo
    form.stuName = row.stuName
    form.className = row.className
    form.collegeName = row.collegeName
    form.expertiseName = row.expertiseName
    form.origin = row.origin
    form.salary = row.salary
    form.gradYear = row.gradYear
    radio1.value = row.status
}

//删除
const handleDelete = async (index: number, row: any) => {
    console.log(index, row)
    tableData.value.splice(index, 1)

}

const handleCheck = (index: number, row: any) => {
    dialogTitle.value = '查看'
    dialogVisible.value = true

    form.stuNo = row.stuNo
    form.stuName = row.stuName
    form.className = row.className
    form.collegeName = row.collegeName
    form.expertiseName = row.expertiseName
    form.origin = row.origin
    form.salary = row.salary
    form.gradYear = row.gradYear
    radio1.value = row.status
}

const edit = () => {
    dialogVisible.value = false
}

//打开添加隐藏框
const handleAdd = () => {
    dialogTitle.value = '添加'
    dialogVisible.value = true
}

//确认添加
const add = async () => {
    dialogVisible.value = false

    let stuNo = form.stuNo
    let stuName = form.stuName
    let className = form.className
    let origin = form.origin
    let salary = form.salary
    let status = radio1.value

    let res = await studentAdd({
        stuNo,
        stuName,
        className,
        origin,
        salary,
        status
    })
    console.log(res);

    getTable()
    form.stuName = form.stuNo = form.className = form.origin = form.salary = ''
}

const exportQuery = {
    origin: null, //专业
    collegeId: null, //学院
    workCity: ''
}

//导出文件
const handleStudentExport = () => {
    //创建元素实例 用于下载导出
    const link = document.createElement('a')
    //样式设置为仅页面不可见
    link.style.display = 'none'
    //设置链接元素
    //qs.stringify 是一个将对象转换为 URL 查询字符串的工具函数
    link.href = 'http://localhost:3002/v1.0/api/export/students?' + qs.stringify(exportQuery)
    link.setAttribute('download', '学生信息导出文件.xls')
    document.documentElement.appendChild(link)
    link.click()
}

const currentPage = ref(0)
const pageSize = ref(0)

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}

//导入文件


</script>

<template>
    <div style="margin-bottom: 20px">
        <el-button type="primary" @click="handleAdd">新增毕业学生</el-button>
        <el-button type="primary">批量删除</el-button>
        <el-button type="primary" @click="">学生批量导入</el-button>
        <el-button type="primary" @click="handleStudentExport">学生批量导出</el-button>
    </div>
    <SearchTable :NameData="NameData" />
    <AllTable :tableData="tableData" :handleEdit="handleEdit" :handleDelete="handleDelete" :handleCheck="handleCheck"
        :TableName="TableName" :currentPage="currentPage" :pageSize="pageSize" />
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[1, 2, 3, 5]"
        layout="total, sizes, prev, pager, next, jumper" :total="tableData.length" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />

    <el-dialog v-model="dialogVisible" :title=dialogTitle width="800" :before-close="handleClose">
        <el-form :model="form" label-width="auto" style="max-width: 600px">
            <el-form-item label="学生学号">
                <el-input v-model="form.stuNo" />
            </el-form-item>
            <el-form-item label="学生姓名">
                <el-input v-model="form.stuName" />
            </el-form-item>
            <el-form-item label="学生班级">
                <el-input v-model="form.className" />
            </el-form-item>
            <el-form-item label="毕业薪资">
                <el-input v-model="form.salary" />
            </el-form-item>
            <!-- <el-form-item label="上线城市">
                <City @update="citys"/>
            </el-form-item> -->
            <el-form-item label="专业">
                <el-select v-model="form.expertiseName" placeholder="please select your zone">
                    <el-option label="网站工程" value="shanghai" />
                    <el-option label="游戏开发" value="beijing" />
                </el-select>
            </el-form-item>
            <el-form-item label="市场部">
                <el-input v-model="form.origin" />
            </el-form-item>
            <el-form-item label="学院">
                <el-select v-model="form.collegeName" placeholder="please select your zone">
                    <el-option label="游戏设计" value="shanghai" />
                    <el-option label="北京网站工程" value="beijing" />
                </el-select>
            </el-form-item>
            <el-form-item label="毕业日期">
                <el-date-picker v-model="form.gradYear" type="datetime" placeholder="Pick a Date"
                    format="YYYY-MM-DD HH:mm:ss" date-format="MMM DD, YYYY" time-format="HH:mm" />
            </el-form-item>
            <el-form-item label="学生状态">
                <el-radio-group v-model="radio1" class="ml-4">
                    <el-radio value="1" size="large">未毕业</el-radio>
                    <el-radio value="2" size="large">返校重修</el-radio>
                    <el-radio value="3" size="large">已就业</el-radio>
                    <el-radio value="4" size="large">返回未就业</el-radio>
                    <el-radio value="5" size="large">以往未就业</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="dialogVisible = false" v-if="dialogTitle === '查看'">
                    确认
                </el-button>
                <el-button type="primary" @click="edit" v-else-if="dialogTitle === '修改'">
                    确认修改
                </el-button>
                <el-button type="primary" @click="add" v-if="dialogTitle === '添加'">
                    添加
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style scoped lang="scss">
#components-form-demo-advanced-search .ant-form {
    max-width: none;
}

#components-form-demo-advanced-search .search-result-list {
    margin-top: 16px;
    border: 1px dashed #e9e9e9;
    border-radius: 2px;
    background-color: #fafafa;
    min-height: 200px;
    text-align: center;
    padding-top: 80px;
}

[data-theme='dark'] .ant-advanced-search-form {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid #434343;
    padding: 24px;
    border-radius: 2px;
}

[data-theme='dark'] #components-form-demo-advanced-search .search-result-list {
    border: 1px dashed #434343;
    background: rgba(255, 255, 255, 0.04);
}
</style>